---
id: fill-view
title: FillView
---

import { Props, BoxProps } from '../../core/components';

`FillView` covers a common pattern for creating overlays with position absolute and zero positioning.


### Basic usage

```jsx live
const App = () => {
  return (
    <Container height={440}>
      <FillView alignX="center" alignY="center">
        <Placeholder width={128} height={128} />
      </FillView>
    </Container>
  )
}

render(<App />)
```

### Unset

Use `unset` to reset a property value.

```jsx
import { unset } from '@mobily/stacks'
```

```jsx live
const App = () => {
  return (
    <Container height={440}>
      <FillView bottom={unset} right={unset}>
        <Placeholder width={80} />
      </FillView>

      <FillView bottom={unset} left={unset}>
        <Placeholder width={80} />
      </FillView>

      <FillView top={unset}>
        <Columns space={4}>
          <Placeholder />
          <Placeholder />
          <Placeholder />
        </Columns>
      </FillView>
    </Container>
  )
}

render(<App />)
```

### Props

:::info

`FillView` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'top',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'right',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'bottom',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
    {
      name: 'left',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: 0
    },
  ]} />

<Props
  data={[
     {
      name: 'alignX',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #between | #around | #evenly | #stretch]>',
      required: false,
    },
    {
      name: 'alignY',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #between | #around | #evenly | #stretch]>',
      required: false,
    },
    {
      name: 'alignSelf',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #stretch]>',
      required: false,
    },
    {
      name: 'direction',
      type: 'responsiveProp<[#row | #rowReverse | #column | #columnReverse]>',
      rawTsType: "ResponsiveProp<'row' | 'row-reverse' | 'column' | 'column-reverse'>",
      required: false,
    },
    {
      name: 'wrap',
      type: 'responsiveProp<[#wrap | #nowrap]>',
      required: false,
    },
  ]} />

<BoxProps />
